<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
    <div class="pane">
        <p @click="playDistance">play</p>
        <p @click="clearDistance">clear</p>
    </div>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import {ref} from "vue";

export default {
    name: "AddDistanceTool.component",
    components: {Maptalks},
    setup() {

        let distanceTool = ref(null), mapStore = ref(null)

        const clearDistance = () => {
            distanceTool.value.clear()
        }

        const playDistance = () => {
            distanceTool.value = new maptalks.DistanceTool({
                // "once": true,

                "symbol": {
                    "lineColor": "#c6a919",
                    "lineWidth": 2
                },

                "vertexSymbol": {
                    "markerType": "ellipse",
                    "markerFill": "#1bbc9b",
                    "markerLineColor": "#f00",
                    "markerLineWidth": 3,
                    "markerWidth": 10,
                    "markerHeight": 10
                },

                "labelOptions": {
                    "textSymbol": {
                        "textFaceName": "monospace",
                        "textFill": "#fff",
                        "textLineSpacing": 1,
                        "textHorizontalAlignment": "right",
                        "textDx": 15,
                        "markerLineColor": "#b4b3b3",
                        "markerFill": "#000"
                    },
                    "boxStyle": {
                        "padding": [6, 2],
                        "symbol": {
                            "markerType": "square",
                            "markerFill": "#000",
                            "markerFillOpacity": 0.9,
                            "markerLineColor": "#b4b3b3"
                        }
                    }
                },

                "clearButtonSymbol": [
                    {
                        "markerType": "square",
                        "markerFill": "#000",
                        "markerLineColor": "#b4b3b3",
                        "markerLineWidth": 2,
                        "markerWidth": 15,
                        "markerHeight": 15,
                        "markerDx": 20
                    }, {
                        "markerType": "x",
                        "markerWidth": 10,
                        "markerHeight": 10,
                        "markerLineColor": "#fff",
                        "markerDx": 20
                    }
                ],

                "language": "en-US"

            }).addTo(mapStore.value);
        }

        let mapOnLoadCB = (map) => {
            mapStore.value = map
        };

        return {
            mapOnLoadCB,
            clearDistance, playDistance
        }
    }
}
</script>

<style scoped lang="less">
.pane {
    background: #34495e;
    line-height: 28px;
    color: #fff;
    z-index: 10;
    position: absolute;
    top: 20px;
    right: 20px;
    p {
        cursor: pointer;
        display: block;
        color: #fff;
        text-align: left;
        padding: 0 10px;
        min-width: 28px;
        min-height: 28px;
        float: left
    }
}

</style>
